<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box{
            width: 500px;
            height: 500px;
            margin: 20px auto;
            border: 10px solid #000;

            /* border-width: 10px;
            border-color: #000;
            border-style: solid; */

            position: relative;
            
        }
        .cover {
            width: 100px;
            height: 100px;
            background-color: #00f000;
            /* position: absolute; */
            cursor: move;

            position: absolute; 

            /* 类似于disabled这个作用 */
            pointer-events: none;

        }



    </style>
</head>
<body>
    <div class="box">
        <div class="cover"></div>
    </div>


    


 

    <script>

        // e.offsetX  距离目标源的距离(目标是指最具体的子元素，而不是绑定事件的标签)


        var oBox = document.querySelector('.box') ;
        var oCover = document.querySelector('.cover') ;

        // 宽度的一半
        var r = oCover.offsetWidth / 2 ;


        oBox.onmousemove = function(e) {
            var e = e || event ;
            var x = e.offsetX - r ;
            var y = e.offsetY - r ;
            oCover.style.cssText = `left:${x}px;top:${y}px`;
        }


        // oCover.onclick = function() {
        //     console.log(666);
        // }
        

    </script>
</body>
</html>